<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day6</title>
<style>
    body{
        display: flex;
        align-items: center;
        justify-content: center;
        vertical-align: center;
        flex-wrap: wrap;
        align-content: center;
    }
    .item{
        display: block;
        width: 20px;
        height: 20px;
        background-color: black;
        border-radius: 50%;
        
    }
    .box1{
        display: block;
        width: 60px;
        height: 60px;
        background-color: rgb(231, 231, 231);
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box2{
        display: block;
        width: 60px;
        height: 60px;
        background-color: rgb(231, 231, 231);
        margin: 5px;
        display: flex;
        justify-content: space-between;
    }
    .box2 .item:nth-child(2){
        align-self: flex-end;
    }
    .box3{
        display: block;
        width: 60px;
        height: 60px;
        background-color: rgb(231, 231, 231);
        margin: 5px;
        display: flex;
    }
    .box3 .item:nth-child(2){
        align-self: center;
    }
    .box3 .item:nth-child(3){
        align-self: flex-end;
    }
    .box4{
        display: block;
        width: 60px;
        height: 60px;
        background-color: rgb(231, 231, 231);
        margin: 5px;
        display: flex;
        justify-content: space-between;
    }
    .col{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .box5{
        display: block;
        width: 60px;
        height: 60px;
        background-color: rgb(231, 231, 231);
        margin: 5px;
        display: flex;
        justify-content: space-between;
    }
    .box5 .col:nth-of-type(2){
        justify-content: center;
    }

    .box6{
        display: block;
        width: 60px;
        height: 60px;
        background-color: rgb(231, 231, 231);
        margin: 5px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-between;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box1">
            <div class="item">  </div>
        </div>
        <div class="box2">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="box3">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>

        <div class="box4">
            <div class="col">
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="col">
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>  
        
        <div class="box5">
            <div class="col">
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="col">
                <div class="item"></div>
            </div>
            <div class="col">
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>

        <div class="box6">
            <div class="col">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>

            <div class="col">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
        </div>
    </div>
    
</body>
</html>